<template>
  <div>
    <el-card class="box-card" style="margin: 20px">
      <div>
        <el-button type="primary" style="margin-bottom: 10px" size="medium">
          课程列表
        </el-button>
        <el-select v-model="value1" placeholder="请选择课程" style="margin-left: 8px" size="medium" @change="changeCategory" >
          <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
        <el-select v-model="value2" placeholder="请选择科目" style="margin-left: 8px" size="medium" @change="changeCourseSubject">
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
      </div>
      <el-table
        :data="tableData1"
        stripe
        style="width: 100%">
        <el-table-column
          type="index"
          label="序号"
          width="180"/>
        <el-table-column
          prop="name"
          label="课程名称">
          <template slot-scope="scope">
            <router-link :to="'/mycourse/seevideo/' + scope.row.url.replace('.mp4','')"><span size="small" type="text">{{ scope.row.name }}</span></router-link>
          </template>
        </el-table-column>
        <el-table-column
          prop="courseTime"
          label="时长"/>
        <el-table-column
          prop="speaker"
          label="主讲人"/>
        <el-table-column
          prop="schedule"
          label="听课进度"/>
        <el-table-column
          prop=""
          label="课后练习">
          <template slot-scope="scope">
            <!--<el-button type="text" size="small">查看</el-button>-->
            <span>{{ scope.row.homework }}/</span>
            <router-link :to="'/mycourse/answer/' + scope.row.id"><span size="small" type="text">答题</span></router-link>
            <el-button size="small" type="text" @click="showHistory(scope.row.id)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
        :visible.sync="dialogVisible"
        :before-close="handleClose"
        title="答题历史记录"
        width="60%">
        <el-table
          :data="historyData"
          style="width: 100%">
          <el-table-column
            type="index"
            label="序号"
            width="180"/>
          <el-table-column
            :formatter="toTime"
            prop="startTime"
            label="开始时间"
            width="180"/>
          <el-table-column
            :formatter="toTime"
            prop="endTime"
            label="交卷时间"/>
          <el-table-column
            prop="score"
            label="得分"/>
          <el-table-column
            prop=""
            label="查看">
            <template slot-scope="scope">
              <router-link :to="'/mycourse/course/result/' + scope.row.courseId + '/' + scope.row.handPaperId"><span size="small" type="text">查看</span></router-link>
            </template>
          </el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer">
          <el-button style="display: none" @click="dialogVisible = false" >取 消</el-button>
          <el-button style="display: none" type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
      <el-pagination
        :page-size="size"
        :total="total"
        style="margin-top: 15px"
        background
        layout="prev, pager, next"
        @current-change="changePage"/>
    </el-card>
  </div>
</template>

<script>
import axios from 'axios'
import Unix from '@/utils/unix'
export default {
  data() {
    return {
      examType: '',
      page: 1,
      size: 10,
      total: 0,
      courseCategoryId: 'all',
      courseChapterId: 'all',
      dialogVisible: false,
      tableData1: [],
      historyData: [],
      options1: [],
      value1: '',
      options2: [],
      value2: ''
    }
  },
  mounted() {
    this.examType = sessionStorage.getItem('EXERCISE_TYPE')
    this.getcourseCategory()
    this.queryList()
  },
  methods: {
    /**
     * 获取列表数据
     */
    queryList() {
      axios.get(`/courseListData/${this.examType}/${this.courseCategoryId}/${this.courseChapterId}/${this.page}/${this.size}`).then(res => {
        if (res.success) {
          this.tableData1 = res.data
          this.total = res.total
        }
      })
    },
    /**
     * 获取课程
     */
    getcourseCategory() {
      axios.get(`/courseCategory/${this.examType}`).then(res => {
        if (res.success) {
          const items = []
          res.data.forEach(item => {
            items.push({ value: item.id, label: item.name })
          })
          this.options1 = items
        }
      })
    },
    /**
     * 获取科目
     */
    getcourseSubject(id) {
      axios.get(`/courseSubject/${id}`).then(res => {
        if (res.success) {
          const items = []
          res.data.forEach(item => {
            items.push({ value: item.id, label: item.name })
          })
          this.options2 = items
        }
      })
    },
    /**
     * 选择课程
     */
    changeCategory(id) {
      this.getcourseSubject(id)
      this.courseCategoryId = id
      this.courseChapterId = 'all'
      this.value2 = ''
      this.page = 1
      this.queryList()
    },
    /**
     * 选择科目
     */
    changeCourseSubject(id) {
      this.courseChapterId = id
      this.page = 1
      this.queryList()
    },
    /**
     * 页面切换
     */
    changePage(page) {
      this.page = page
      this.queryList()
    },
    /**
     * 获取答题历史记录
     */
    showHistory(id) {
      this.dialogVisible = true
      axios.get(`/doCourseHistoryInfo/${id}`).then(res => {
        if (res.success) {
          this.historyData = res.data
        }
      })
    },
    handleClose() {
      this.dialogVisible = false
    },
    toTime(row, column) {
      const date = row[column.property]
      return Unix.unixToTime(date)
    }
  }
}
</script>

<style scoped>

</style>
